<template>
  <div class="nav my-header">
    <div class="center">
      <div class="area">
        <div>
          <img src="/img/logo.png" />
        </div>
        <ul>
          <li @mouseover="active" class="active">
            <div></div>
            <router-link to="/">首页</router-link>
          </li>
          <li @mouseover="active">
            <div></div>
            <router-link to="/scenery_list">热门景点</router-link>
          </li>
          <li @mouseover="active">
            <div></div>
            <router-link to="/zs_play">玩转舟山</router-link>
          </li>
          <li @mouseover="active"> 
            <div></div>
            <router-link to="/food">舟山海味</router-link>
          </li>
          <li @mouseover="active">
            <div></div>
            <router-link to="/hotel">酒店民宿</router-link>
          </li>
          <li @mouseover="active">
            <div></div>
            <router-link to="/ticket">旅游预定</router-link>
          </li>
          <li @mouseover="active">
            <div></div>
            <router-link to="/service/guide">游客服务</router-link>
          </li>
          <li @mouseover="active">
            <div></div>
            <router-link to="/login">用户中心</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    active() {
      const qsa = x => document.querySelectorAll(x)
			const qs = x => document.querySelector((x))
			qsa('.nav .area>ul>li').forEach(li => {
				li.onmouseover = function() {
					qs('.nav .area>ul>li.active').classList.remove('active')
					this.classList.add('active')
				}
			})
    }
  },
};

</script>
<style scoped src="../assets/css/nav.css"></style>
<style lang="scss" scoped></style>
